<template>
     <div class="tabber" v-show="isShow">
        <template v-for="(item,index) in data" :key="index">
            <div class="tabber-item" 
                @click="routeChange(item.path,index)"
            >
                <img :src="getUrl(item.url)" alt=""  v-show="index !== currentIndex">
                <img :src="getUrl(item.actionURL)" alt="" v-show="index === currentIndex">
                <span class="title" :class="{active: index===currentIndex}">{{ item.title }}</span>
            </div>
        </template>
     </div>
     
</template>

<script setup>
    import {getUrl} from "@/utils/getUrl"
    import { ref,watch} from "vue"
    import {useRouter,useRoute} from "vue-router"
    import useTabberStore from "@/stores/modules/tabber.js"
    import { storeToRefs } from "pinia"

    
    const router = useRouter()
    const route = useRoute()
    const tabberStore = useTabberStore()
    const {data} = storeToRefs(tabberStore)

    const currentIndex = ref(0)
    const isShow = ref(!route.meta.TabberNoShow)
    const allRoutePath = ["/home","/favor","/order","/message"]
    watch(route,(newval)=>{
        isShow.value = !newval.meta.TabberNoShow
        if (allRoutePath.indexOf(newval.path)  !== -1) currentIndex.value = allRoutePath.indexOf(newval.path) 
    })
    
    function routeChange(path,index){
        router.push(path)
        currentIndex.value = index
    }
</script>

<style lang="less" scoped>
    .tabber{
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        // justify-content: center;
        width: 100%;

        border-top: 1px solid #f3f3f3;
        background-color: #fff;
        .tabber-item{
            flex:1;
            display: flex;
            flex-direction: column;
            align-items: center;

            .title {
                margin-top: 2px;
                font-size: 12px;
                
                &.active {
                    color: var(--primary-color);
                }
            }

            img {
                width: 26px;
            }
        }
    }
</style>